<template>
  <view class="assessIndex">
    <familyInner @changePerson="changePerson" @getFamilyList="getFamilyList"></familyInner>
    <view class="botTips">
      <span class="import">重要</span>
      本评估依据您真实完整的健康信息，通过万户健康数字化管理系统分析评估，预测健康风险，提供科学合理的健康决策和指导，本评估不能取代专业的医学诊疗，请知悉。
    </view>
    <view v-if="filterMeList && filterMeList.length > 0" class="history">
      <view v-for="(item, index) in filterMeList" :key="index" class="list" @click="goReportDetail(item)">
        <view v-if="!item.hasRead" class="mark">未读</view>
        <div class="title">{{ item.reportDate }}</div>
        <div class="des">{{ item.name }}的健康评估报告。</div>
        <!-- <div class="des">{{ item.name }}为被评估的成员</div> -->
        <div class="btn"><span>查看</span><span class="btn-icon">&#xe665;</span></div>
      </view>
    </view>
    <!-- <view v-if="!ajaxDone" class="noData"> 正在加载，请稍后… </view> -->
    <view v-if="ajaxDone && filterMeList.length < 1" class="zwbg"> </view>
  </view>
</template>

<script>
import { getAssessmentReports, postRead, getFamilyAssessmentReports } from '@/api/assessQuestion';
import { familyInner } from '@/components/familyInner';
import { tongji } from '@/utils/tools';
// 健康评估报告列表
export default {
  components: {
    familyInner
  },
  data() {
    return {
      patientId: '',
      meList: [],
      filterMeList: [],
      ajaxDone: false
    };
  },
  computed: {
    assessPatientId() {
      return this.$store.getters.assessPatientId;
    }
  },

  methods: {
    getAssessmentReportsById(patientId) {
      // 获取健康评估报告列表
      getAssessmentReports(patientId).then((res) => {
        // const self = this;
        // setTimeout(function () {
        //   self.ajaxDone = true;
        // }, 500);
        this.ajaxDone = true;
        if (res.code === 0) {
          this.filterMeList = res.data;
        } else {
          uni.showModal({
            title: '提示',
            content: '获取评估报告列表失败'
          });
        }
      });
    },
    getFamilyAssessmentReportsByIds(patientIdStr) {
      getFamilyAssessmentReports(patientIdStr).then((res) => {
        this.ajaxDone = true;
        if (res.code === 0) {
          this.meList = res.data;
          this.filterMeList = res.data;
        } else {
          uni.showModal({
            title: '提示',
            content: '获取评估报告列表失败'
          });
        }
      });
    },
    getFamilyList(familyList) {
      let patientIdStr = familyList
        .slice(1)
        .map((item) => {
          return item.insuredId;
        })
        .join(',');

      this.getFamilyAssessmentReportsByIds(patientIdStr);
    },
    changePerson(index, relation, insuredId) {
      this.ajaxDone = false;
      if (index === 0) {
        this.filterMeList = this.meList;
      } else {
        this.getAssessmentReportsById(insuredId);
      }
    },
    goReportDetail(item) {
      // 报告此健康报告已读,无需同步
      if (!item.hasRead) {
        postRead(item.id).then((res) => {
          if (res.code === 0) {
            item.hasRead = true;
          }
        });
      }

      this.$store.commit('assessQuestion/SET_ASSESSPATIENTID', item.patientId);

      // 跳转到报告详情页
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessResult/index?patientId=' + item.patientId + '&id=' + item.id
      });
      tongji('b20e113b-cbff-4bd7-831f-bf1a6f24710c');
    }
  }
};
</script>
<style lang="scss" scoped>
.assessIndex {
  margin: 24rpx;
  margin-bottom: 100rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .history {
    .list {
      position: relative;
      width: 700rpx;
      height: 310rpx;
      padding: 40rpx 24rpx;
      box-sizing: border-box;
      border-bottom: 8rpx solid #fee9e9;
      background-image: url('~@/static/assess/report-bg.png');
      background-position: 436rpx 40rpx;
      background-repeat: no-repeat;
      background-color: white;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
      background-size: 232rpx 176rpx;
      margin-bottom: 24rpx;
      .title {
        font-size: 44rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
      .des {
        margin-top: 10rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
      }
      .btn {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #2680eb;
        display: flex;
        align-items: center;
        .btn-icon {
          font-size: 28rpx;
          font-family: 'gg-iconfont';
          margin-top: 6rpx;
        }
      }
    }
    .mark {
      width: 60rpx;
      height: 0;
      border-left: 40rpx solid transparent;
      border-right: 40rpx solid transparent;
      border-bottom: 40rpx solid #ff5968;
      transform: rotate(45deg);
      position: absolute;
      right: -32rpx;
      top: 16rpx;
      text-align: center;
      line-height: 1.7em;
      font-size: 24rpx;
      color: #ffffff;
    }
  }
  .botTips {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.55);
    font-size: 28rpx;
    text-align: left;
    padding: 30rpx 24rpx;
    border-radius: 16rpx;
    line-height: 1.7em;
    margin: 24rpx 0rpx;
    .import {
      background-color: #f34e1c;
      color: #fff;
      font-size: 24rpx;
      padding: 4rpx 8rpx;
      border-radius: 8rpx;
      margin-right: 6rpx;
    }
  }
}
.noData {
  color: #999;
  text-align: center;
  padding: 50rpx;
}
</style>
